import React from 'react';

import Tools from '@untils/tools.jsx';
import {Links} from '@assets/config/global.js';

import HomeHeadImg from '@assets/images/home-header.jpg';
import BottomImg from '@assets/images/bottom-banner.jpg';
import {APIS_HOME, APIS_NAV_TREE} from '@apis/index.js';
import Request from '@ajax/index.jsx';

import './scss/index.scss';

const _req = new Request();

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            maps: [],
            orgId: '',
            orgDetail: {}
        };
        this.seekPath = Tools.seekPath.bind(this);
        this.setCallback = Tools.setCallback.bind(this);
    }

    componentDidMount() {
        let options = APIS_HOME.HOMEMAP(1);
        _req.axios(options).then(data => {
            this.setCallback({
                maps: data,
                orgId: data[0].orgId || 1
            }, this.requestOrgDetail, this.requestDots)
        });
    }

    // 获取当值信息
    requestDots() {
        let options = APIS_NAV_TREE.TREELIST(0);
        let dotO = APIS_HOME.DOTLIST;
        let dotData = {
            pagination: { currentPage: 0, pageCount: 0, pageSize: 0 },
            searchContent: {}
        };
        let dotOptions = Tools.objectAssign(dotO, {data: dotData});

        _req.axios(options).then(data => {
            let partys = data.subs || [], branchs = {};
            //党支部信息存储到本地
            partys.forEach(party => {
                let partyBranchs = party.subs;
                partyBranchs.forEach(partyBranch => {
                    branchs[partyBranch.id] = {
                        orgId: partyBranch.id,
                        name: partyBranch.name
                    };
                })
            });
            Tools.storage('session', 'partyBranch', branchs);
        });

        _req.axios(dotOptions).then(res => {
            let content = res.content || [];
            let obj = {};
            content.forEach(item => {
                let objKeys = Object.keys(obj);
                let type = item.type;

                if (objKeys.includes(type)) {
                    obj[type][item.value] = {
                        id: item.value,
                        name: item.text
                    }
                } else {
                    obj[type] = {
                        [item.value]: {
                            id: item.value,
                            name: item.text
                        }
                    }
                }
            });
            Object.keys(obj).forEach(item => {
                Tools.storage('session', item, obj[item]);
            })
        })
    }

    requestOrgDetail() {
        let {orgId} = this.state;
        let options = APIS_HOME.ORGDETAIL(orgId);
        _req.axios(options).then(data => {
            this.setCallback({orgDetail: data})
        })
    }

    render() {
        let leftLinks = Links.slice(0, 6);
        let rightLinks = Links.slice(6);
        const {maps, orgDetail = {}, orgId} = this.state;

        return (
            <div className="home-page">
                <div className="home-header">
                    <img src={HomeHeadImg} alt='' className="head-img"/>
                    <div className="header-content">
                        <div className="logo-title">
                            <div className="logo"></div>
                            <span className="home-title">三里街党建平台</span>
                        </div>

                        <div className="page-name">
                            <span className="page-icon parter-icon"></span>
                            <span className="page-name-txt">党建地图</span>
                        </div>
                    </div>
                </div>
                <div className="home-content">
                    {/*content-wrap*/}
                    <div className="content-wrap">
                        {/*map*/}
                        <div className='map-area'>
                            {
                                maps.map((item, index) => {
                                    let iconPos = {left: item.iconx, top: item.icony};
                                    return (
                                        <span className={`svg-item ${orgId === item.orgId ? 'active' : ''}`}
                                              key={index + 1}
                                              style={{left: `${item.left}px`, top: `${item.top}px`}}
                                              onClick={() => this.setCallback({orgId: item.orgId}, this.requestOrgDetail)}
                                        >
                                            <div className="parter-icon" style={iconPos}>
                                                <i className="bottom-arrow"></i>
                                                <div className="parter-num">{item.pos}</div>
                                            </div>
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             xmlnslink="http://www.w3.org/1999/xlink"
                                             preserveAspectRatio="xMidYMid"
                                             width={item.width}
                                             height={item.height}
                                             viewBox={`0 0 ${item.width} ${item.height}`}
                                        >
                                            <path d={item.path}/>
                                        </svg>
                                    </span>
                                    )
                                })
                            }

                            <div className="to-county">
                                <span className="icon-xy"></span>
                                县直党工委 >
                            </div>
                        </div>
                        <div className="gather-msg">
                            <div className="icon-pointer pointer-1">
                                <div className="area-name"><p>{orgDetail.name || '---'}</p></div>
                            </div>
                            <div className="icon-pointer pointer-2">
                                <div className="txt-area right">县委书记：{orgDetail.secretary || '---'}</div>
                            </div>
                            <div className="icon-pointer pointer-3">
                                <div className="txt-area left">地址：{orgDetail.address || '---'}</div>
                            </div>
                            <div className="icon-pointer pointer-4">
                                <div className="txt-area right">总面积：<span className="data">{orgDetail.area || '---'}</span>平方公里</div>
                            </div>
                            <div className="icon-pointer pointer-5">
                                <div className="txt-area left">乡镇（街道）：<span className="data">{orgDetail.streetNum||'---'}</span>个</div>
                            </div>
                            <div className="icon-pointer pointer-6">
                                <div className="txt-area right">行政村（社区）：<span className="data">{orgDetail.villageNum||'---'}</span>个</div>
                            </div>
                            <div className="icon-pointer pointer-7">
                                <div className="txt-area left">总人口：<span className="data">{orgDetail.peopleNum||'---'}</span>万</div>
                            </div>
                            <div className="icon-pointer pointer-8">
                                <div className="txt-area right">下级党组织：<span className="data">{orgDetail.subNum||'---'}</span>个</div>
                            </div>
                            <div className="icon-pointer pointer-9">
                                <div className="txt-area left">党员：<span className="data">{orgDetail.memberNum||'---'}</span>万名</div>
                            </div>
                            <div className="icon-pointer pointer-10">
                                <div className="txt-area right">县直党（工）委：<span className="data">{orgDetail.countyPartyNum||'---'}</span>个</div>
                            </div>
                            <div className="icon-pointer pointer-11">
                                <div className="txt-area left">党代表：<span className="data">{orgDetail.repNum||'---'}</span>名</div>
                            </div>
                            <div className="icon-pointer pointer-12">
                                <div className="txt-intr">
                                    <p className="txt-detail">
                                        <span className="after-btn">查看更多</span>
                                        {orgDetail.introduction||'---'}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/*left-nav*/}
                    <div className="home-left-nav">
                        {
                            leftLinks.map((item, index) => {
                                return (
                                    <dl className="nav-item" key={index}
                                        onClick={() => this.seekPath(item.path)}
                                    >
                                        <dt className={`nav-item-icon ${item.icon}`}></dt>
                                        <dd className="nav-item-txt">{item.name}</dd>
                                    </dl>
                                )
                            })
                        }
                    </div>
                    {/*right-nav*/}
                    <div className="home-right-nav">
                        {
                            rightLinks.map((item, index) => {
                                return (
                                    <dl className="nav-item" key={index}
                                        onClick={() => this.seekPath(item.path)}
                                    >
                                        <dt className={`nav-item-icon ${item.icon}`}></dt>
                                        <dd className="nav-item-txt">{item.name}</dd>
                                    </dl>
                                )
                            })
                        }
                    </div>

                    <div className="bottom-options">
                        <img src={BottomImg} alt="b" className="bottom-img"/>
                        <div className="options-wrap">
                            <div className="options-item">
                                <p className="num">{orgDetail.onlineNum || '---'}</p>
                                <p className="item-name">当前人数</p>
                                <p className="units">(人)</p>
                            </div>
                            <div className="options-item">
                                <p className="num">{orgDetail.dutyNum || '---'}</p>
                                <p className="item-name">当前坐班</p>
                                <p className="units">(人)</p>
                            </div>
                            <div className="options-item">
                                <p className="num player"></p>
                                <p className="item-name player">自动演示</p>
                                <p className="units"></p>
                            </div>
                            <div className="options-item">
                                <p className="num">{orgDetail.hqNum || '---'}</p>
                                <p className="item-name">党总支</p>
                                <p className="units">(个)</p>
                            </div>
                            <div className="options-item">
                                <p className="num">{orgDetail.branchNum || '---'}</p>
                                <p className="item-name">党支部</p>
                                <p className="units">(个)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Home;